<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>${module!}</title>
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    [#include '/base/common/common.html']
</head>
<body class="body">
<!-- 筛选表单 -->
<form class="layui-form my-btn-box">
    <#if htmlConfig.columns??>
        <#assign index_=0>
        <#assign index__=1>
        <#list htmlConfig.columns as column>
            <#if column.filterColumn>
                <#if column.filterType=='text'>
${column.title!}：
    <div class="layui-inline">
        <input class="layui-input" name="strVal<#if index_!= 0>${index_}</#if>" autocomplete="off">
    </div>
    <#assign index_++>
                <#elseif column.filterType=='select'>
${column.title!}：
    <div class="layui-inline">
        <select name="strVal<#if index_ != 0>${index_}</#if>">
            <option value="">请选择</option>
        [#--这里自己改一下--]
            <option value="val1">val1</option>
            <option value="val2">val1</option>
        </select>
    </div>
    <#assign index_++>
                <#elseif column.filterType=='date' || column.filterType=='date-range' >
${column.title!}：
    <div class="layui-inline" style="width:<#if column.filterType=='date'>200<#else>280</#if>px">
        <input class="layui-input" id="${column.field}_filter_id" name="date${index__}" autocomplete="off">
    </div>
    <#assign index__++>
            </#if>
            </#if>
        </#list>
    </#if>
    <button class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i>查询</button>
</form>
<!-- 表格 -->
<table class="layui-hide" id="dataTable" lay-filter="dataTableFilter"></table>
<!--表格头部工具栏-->
<script type="text/html" id="toolBarOption">
    <div class="layui-btn-container">
    ${r'[#list buttons as btn]'}
        <button class="layui-btn layui-btn-sm ${r'${btn.buttonColor!}'}" lay-event="${r'${btn.code!}'}"><i class="layui-icon">${r'${btn.icon!}'}</i>${r'${btn.name!}'}</button>
    ${r'[/#list]'}
    </div>
</script>
<!--表格行工具栏-->
<#if htmlConfig.rowTool>
    <script type="text/html" id="barOption">
        [@shiro.hasPermission name="${modelSnakeName!}:edit"]
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit" title="修改"><i class="layui-icon">&#xe642;</i></a>
        [/@shiro.hasPermission]
        [@shiro.hasPermission name="${modelSnakeName!}:delete"]
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete" title="删除"><i class="layui-icon">&#xe640;</i></a>
        [/@shiro.hasPermission]
    </script>
</#if>
<#if htmlConfig.needAddForm || htmlConfig.needEditForm>
<!--引入新增表单-->
[#include "/${modelSnakeName!}/add.html"]
</#if>
<script type="text/javascript">
// 配置扩展方法路径
layui.config({
    base: '${htmlConfig.baseUrl!}/static/js/layui/extend/'   // 模块目录
}).extend({                         // 模块别名
    vip_nav: 'vip_nav'
    , vip_tab: 'vip_tab'
    , vip_table: 'vip_table'
});
layui.use(['form', 'table','util','laydate', 'vip_table'], function () {
    var form = layui.form, table = layui.table,vipTable = layui.vip_table;

    var tableRenderLoadingIndex = layer.load(2);
    //渲染日期控件
<#if htmlConfig.columns??>
<#list htmlConfig.columns as column>
    <#if column.filterColumn &&(column.filterType=='date'|| column.filterType=='date-range')>
    layui.laydate.render({
        elem: '#${column.field!}_filter_id'
        ,type:'datetime'//这里自行决定使用如一个：date,datetime,time,year,month
        //,value:'' //初始值
        //,min:'' //最小值
        ,max:0 //最大值，默认今天
        ,format:'yyyy-MM-dd HH:mm'
    <#if column.filterType=='date-range'>
        ,range:'~'
    </#if>
    });
        </#if>
    </#list>
    </#if>

    //表格数据渲染器
    var tableDataRender={
                <#if htmlConfig.columns??>
    <#list htmlConfig.columns as column>
        <#if column.templet>
                <#if column?index != 0>,</#if>
    ${column.field!}:function (data) {
            return data.${column.field!};//TODO:这里要自己处理一下
        }
    </#if>
        </#list>
        </#if>
    };
    //方法级渲染
    table.render({
        elem: '#dataTable'
        ,toolbar: '#toolBarOption' //头部工具栏
        , url: '${htmlConfig.baseUrl!}/${modelSnakeName!}/list'
        , height: vipTable.getFullHeight()   //容器高度
        , cols: [[
            <#if htmlConfig.showCheckBox>
            {checkbox: true, fixed: true},
                </#if>
        <#if htmlConfig.columns??>
    <#list htmlConfig.columns as column>
            <#if column?index != 0>,</#if>{field: '${column.field!}', title: '${column.title!}',<#if column.width!='-1'>width: ${column.width!},</#if>sort: ${column.sort?c}, fixed: ${column.fixed?c}, hide: ${column.hide!?c},align:'${column.align!}'<#if column.templet>,templet:tableDataRender.${column.field!}</#if>}
        </#list>
        </#if>
        <#if htmlConfig.rowTool>,{fixed: 'right', title:'操作', toolbar: '#barOption', width:100,align:'center'}</#if>
         ]]
        , id: 'dataTableId'
                , page: true
                , request: {
            pageName: 'pageNum' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
        },response: {//规定返回的数据格式
            countName: 'total' //规定数据总数的字段名称，默认：count
                    ,dataName: 'list' //规定数据列表的字段名称，默认：data
        }, done: function (res, curr, count) {
            layer.close(tableRenderLoadingIndex);
        }
    });
    //事件处理器
    var eventHandler = {
        //刷新
        refresh: function (option) {
                    tableRenderLoadingIndex = layer.load(2);
                    table.reload('dataTableId',option?option:{});
                }
<#if htmlConfig.needAddForm>
        //新增
        ,add:function () {
            layer.open({
                type:1 //页面层
                ,title:'新增'
                ,area:['500px']
                ,content:$('#addForm')
                ,maxmin:true //最大最小化
                ,resize:false //不允许拉伸
                ,btn:['确定','取消']
                ,yes:function (index, layero) {
                    //指定提交类型新增
                    addFormSubmitEventHandler.type='add';
                    //手动触发表单提交事件
                    $('#addForm :submit').click();
                }
                ,end:function () {//窗口销毁后回调
                    $('#addForm')[0].reset();
                }
            });
        }
</#if>
<#if htmlConfig.needEditForm>
        //修改
        ,edit:function (record) {
            if(!record){
                var checkStatus = table.checkStatus('dataTableId');
                if (checkStatus.data.length==0) {
                    layer.msg('请选择要修改的数据', {icon: 3});
                    return;
                }
                if (checkStatus.data.length>1){
                    layer.msg('一次只能修改一条数据', {icon: 3});
                    return;
                }
                record = checkStatus.data[0];
            }
            //TODO:枚举枚举类型值转换
            //TODO:radio，checkbox的值为string表单才能值成功

            //表单初始赋值
            form.val('addFormFilter',record);
            //设置不可修改字段
            $('#addForm input[editeable=false]').attr('readonly',true);
            //设置不提交字段
            $('#addForm input[submit=false]').attr('disabled',true);

            layer.open({
                type:1 //页面层
                ,title:'修改'
                ,area:['500px']
                ,content:$('#addForm')
                ,maxmin:true //最大最小化
                ,resize:false //不允许拉伸
                ,btn:['确定','取消']
                ,yes:function (index, layero) {
                    //指定提交类型更新
                    addFormSubmitEventHandler.type='update';
                    //手动触发表单提交事件
                    $('#addForm :submit').click();
                }
                ,end:function () {//窗口销毁后回调
                    //初始化add表单
                    $('#addForm')[0].reset();
                    //还原禁用和只读输入框
                    $('#addForm input[editeable=false]').attr('readonly',false);
                    $('#addForm input[submit=false]').attr('disabled',false);
                }
            });
        }
</#if>
    <#if htmlConfig.canDelete || htmlConfig.canBatchDelete >
        //删除
        ,delete:function (record) {
            if(!record){
                var checkStatus = table.checkStatus('dataTableId');
                if (checkStatus.data.length==0) {
                    layer.msg('请选择要删除的数据', {icon: 3});
                    return;
                }
            <#if htmlConfig.canBatchDelete>
                    if (checkStatus.data.length>1000){
                        layer.msg('一次最多只能删除1000条数据', {icon: 3});
                        return;
                    }
            <#else>
                if (checkStatus.data.length>1){
                    layer.msg('一次只能删除一条数据', {icon: 3});
                    return;
                }
            </#if>
            }
            layer.alert("确定要删除选中的数据？", {icon:0},function () {
                var ids = [];
                if(record){
                    ids.push(record.id);
                }else {
                    for (var i in checkStatus.data) {
                        ids.push(checkStatus.data[i].id);
                    }
                }
                var loadIndex = layer.load(2);
                $.post(
                        '${htmlConfig.baseUrl!}/${modelSnakeName!}/<#if htmlConfig.canBatchDelete>batch_delete<#else>delete</#if>'
                        ,{ids:ids.join(',')}
                        ,function (data) {
                            layer.close(loadIndex);
                            if (data.success){
                                layer.msg("删除成功！");
                                eventHandler.refresh();
                            } else {
                                layer.alert(data.msg);
                            }
                        }
                        ,'json'
                );
            });
        }
</#if>
    };
    //监听表头工具栏事件
    table.on('toolbar(dataTableFilter)', function (obj) {
        eventHandler[obj.event]?eventHandler[obj.event].call(this):'';
    });
    <#if htmlConfig.rowTool>
    //监听行工具事件
    table.on('tool(dataTableFilter)', function(obj){
        eventHandler[obj.event]?eventHandler[obj.event].call(this,obj.data):'';
    });
    </#if>
    //查询表单提交事件
    form.on('submit(search)', function(data){
    <#if htmlConfig.columns??>
    <#assign index_=1>
    <#list htmlConfig.columns as column>
        <#if column.filterColumn &&(column.filterType=='date'|| column.filterType=='date-range')>
                <#if column.filterType=='date-range'>
        if(data.field.date${index_}){
            var date = data.field.date${index_}.split('~');
            data.field.date${index_}=$.trim(date[0]);
            data.field.date${index_}end=$.trim(date[1]);
        }
                </#if>
        <#assign index_++>
        </#if>
        </#list>
        </#if>
        eventHandler.refresh({
            page: {
                curr: 1 //重新从第 1 页开始
            }
            , where: data.field
        });
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
    <#if htmlConfig.needAddForm || htmlConfig.needEditForm>
    //----------下以为Add表单逻辑-----------//
    //自定义验证规则
    form.verify(global_verify);
    //渲染日期控件
    <#if htmlConfig.columns??>
    <#list htmlConfig.columns as column>
        <#if column.inputType=='date'>
    layui.laydate.render({
        elem: '#${column.field!}_id'
        ,type:'#${column.dateType!}'
        <#if column.defaultDate??>,value:'#${column.defaultDate!}'</#if>
        <#if column.minDate??>,min:'#${column.minDate!}'</#if>
        <#if column.maxDate??>,max:'#${column.maxDate!}'</#if>
        <#if column.format??>,format:'#${column.format!}'</#if>
        <#if column.range??>,range:'~'</#if>
    });
        </#if>
    </#list>
    </#if>
    var addFormSubmitEventHandler = {
        type:'add'//提交类型，add:添加，update：修改
<#if htmlConfig.needAddForm>
        ,add:function (data) {
            var loadIndex = layer.load(2);
            $.post(
                    '${htmlConfig.baseUrl!}/${modelSnakeName!}/add'
                    ,data
                    ,function (data) {
                        layer.close(loadIndex);
                        if (data.success){
                            layer.msg("添加成功！");
                            eventHandler.refresh();
                        } else {
                            layer.alert(data.msg);
                        }
                    }
                    ,'json'
            );
        }
</#if>
<#if htmlConfig.needEditForm>
        ,update:function (data) {
            var loadIndex = layer.load(2);
            $.post(
                    '${htmlConfig.baseUrl!}/${modelSnakeName!}/update'
                    ,data
                    ,function (data) {
                        layer.close(loadIndex);
                        if (data.success){
                            layer.msg("修改成功！");
                            layer.closeAll();
                            eventHandler.refresh();
                        } else {
                            layer.alert(data.msg);
                        }
                    }
                    ,'json'
            );
        }
</#if>
    }
    //添加/修改表单提交事件，为了触发验证
    form.on('submit(submitAddFromFilter)', function(data){
        //表单验证通过后会执行下面的代码
        addFormSubmitEventHandler[addFormSubmitEventHandler.type].call(this,data.field);
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
</#if>
});
</script>
</body>
</html>